<template>
	<view class="pageBox">
		
		<!--群聊-->
		<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
			<view
				class="cu-bar fixed bg-bgcolor"
				:style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px',
					backgroundColor: common.appStyle.cart_nav_color ? common.appStyle.cart_nav_color : '#f7f7f7',
					backgroundImage: 'url(' + $wanlshop.oss( common.appStyle.cart_nav_image, 0, 50, 1, 'transparent', 'png' ) + ')',
					color: common.appStyle.cart_font_color == 'light' ? '#ffffff' : '#333333'
				}"
			>
				<view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
					群聊
				</view>
				
				<view class="right">
					<image src="/static/images/add.png" class="search-icon" 
					@click="$wanlshop.auth('/pages/new/chatgroup-create')"></image>
				</view>
			</view>
		</view>
				
				
		<view class="list" v-if="dataList.length > 0">
			<view class="list-item" v-for="(item, index) in dataList" :key="index"
			@click="$wanlshop.auth(`/pages/new/chat/group?id=${item.id}&nickname=${item.name}`)">
				<view class="left-box">
					<image :src="item.image" class="list-image"></image>
					<view class="flex flex-direction">
						<view class="list-title text-cut">{{item.name || ''}}</view>
						<view class="chat-content text-cut">{{item.msg.message || ''}}</view>
					</view>
				</view>
				
				<view class="num-box">
					<view class="time" v-if="item.msg">{{item.msg.time|| ''}}</view>
					<view class="num"  v-if="item.msg_num > 0">{{item.msg_num || 0}}</view>
				</view>
			</view>
		</view>
		
		<!-- 更多 -->
		<uni-load-more :status="status" :content-text="contentText" />
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			dataList:[
				// {
				// 	id:10,
				// 	image:'/static/images/default/screen_icon_new.png',
				// 	name:'昵称',
				// 	msg_num: 11,
				// 	msg:{
				// 		message:'内容',
				// 		time:'20:50',
				// 	}
				// }
			],
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'noMore',//noMore loading
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载...',
				contentnomore: ''
			}
		}
	},
	onLoad() {
		this.getList();
	},
	onShow(){
	},
	// 触底加载更多
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.getList();
		}
	},
	computed: {
		...mapState(['common'])
	},
	methods: {
		getList() {
			let that = this;
			this.status = 'loading';
			uni.request({
				url: '/chat/grouplist',
				data: {
					page: this.current_page,
				},
				success: res => {
					res = res.res;
					if (res.code === 1) {
						res.data.data.forEach(function(value, index){
							if(value.msg && value.msg.message && value.msg.message_type == 'image'){
								value.msg.message = '[图片]'; 
							}
							
							if(value.msg && value.msg.message && value.msg.message_type == 'mp3'){
								value.msg.message = '[语音]'; 
							}
							
							if(value.msg && value.msg.message && value.msg.message_type == 'redpacket'){
								value.msg.message = '[红包]'; 
							}
							
							if(value.msg && value.msg.message && (value.msg.message_type == 'zz' || value.msg.message_type == 'sz')){
								value.msg.message = '[转账]';
							}
						})
						
						that.dataList = [...that.dataList, ...res.data.data];
						that.current_page = res.data.current_page; //当前页码
						that.last_page = res.data.last_page; //总页码
						that.status = 'more';
					}
				}
			});
		}
	}
}
</script>

<style>
page{
	background-color:  #ffffff !important;	
}
</style>

<style scoped lang="scss">
.search-icon{
	width: 48rpx;
	height: 48rpx;
	margin-right: 34rpx;
	
	/*#ifdef MP*/
	margin-right: 10rpx !important;
	/*#endif*/
}


.list{
	background-color: #ffffff;
	margin-bottom: env(safe-area-inset-bottom);
	width: 100%;
	
	.list-item{
		padding: 18rpx 32rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.list-image{
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
		margin-right: 24rpx;
		flex-shrink: 0;
	}
	
	.list-title{
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 700;
		color: #333333;
		line-height: 44rpx;
		width: 500rpx;
	}
	
	.left-box{
		display: flex;
		align-items: center;
	}
	
	.chat-content{
		font-size: 24rpx;
		font-family: DengXian-Regular, DengXian;
		font-weight: 400;
		color: #707070;
		line-height: 44rpx;
		width: 500rpx;
		min-height: 40rpx;
	}
	
	.num-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-shrink: 0;
	}
	
	.time{
		font-size: 24rpx;
		font-family: DengXian-Regular, DengXian;
		font-weight: 400;
		color: #707070;
		line-height: 44rpx;
	}
	
	.num{
		width: 40rpx;
		height: 40rpx;
		background: #9C3728;
		opacity: 1;
		font-size: 26rpx;
		font-family: DengXian-Bold, DengXian;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}
}

.right{
	position: absolute;
	right: 0px;
}

</style>